import { useEffect } from "react";
import { Descriptions, Space } from "antd";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import ApplicationDetailTypes from "./DetailTypes";
import ApplicationDetailVersions from "./DetailVersions";

const ApplicationDetail = ({ item, reloadData }) => {
    const { remoteData } = useModel("global");

    const state = useReactive({
        typeLoading: false,
        applicationTypes: [],
        selectedType: null,
        typeVersions: [],
        versionLoading: false,
        object: {},
    });

    const loadApplicationTypes = async () => {
        state.typeLoading = true;
        let res = await remoteData({
            object: "bnt-application-resource-center-service",
            serviceName: "/developer/tools/application/getTypes",
            params: { appUuid: item.appUuid },
        });
        state.applicationTypes = res || [];
        state.typeLoading = false;
    };

    useEffect(() => {
        if (item?.appUuid) {
            loadApplicationTypes();
        }
    }, [item]);

    return (
        <Space direction="vertical" size={10} style={{ width: "100%" }}>
            <Descriptions size="small" bordered column={2} style={{ padding: 0 }} labelStyle={{ color: "#999", width: 120, textAlign: "right" }}>
                <Descriptions.Item label="应用说明" span={2}>
                    {item.appDesc || "-"}
                </Descriptions.Item>
                <Descriptions.Item label="应用分类">{item.atacName || "-"}</Descriptions.Item>
                <Descriptions.Item label="开发者类型">{item.appSdty || "-"}</Descriptions.Item>
                <Descriptions.Item label="开发者名称">{item.appSdna || "-"}</Descriptions.Item>
                <Descriptions.Item label="开发者身份码">{item.appSduu || "-"}</Descriptions.Item>
                <Descriptions.Item label="创建时间">{formatUTCTime(item.appCrti)}</Descriptions.Item>
                <Descriptions.Item label="更新时间">{formatUTCTime(item.appUpti)}</Descriptions.Item>
            </Descriptions>

            <ApplicationDetailTypes application={item} applicationTypes={state.applicationTypes} typeLoading={state.typeLoading} reloadData={loadApplicationTypes} />

            <ApplicationDetailVersions application={item} applicationTypes={state.applicationTypes} />
        </Space>
    );
};

export default ApplicationDetail;
